<template>
    <!--语法：
        v-for="别名 in 源数据"
        v-for="(别名,索引) in 源数据)"
    口诀：哪个标签需要循环就在哪个标签里面写 v-for指令
        -->
    <ul>
        <!-- 循环数组 -->
        <li v-for="item in arr">
            {{ item }}
        </li>
    </ul>
    <p>学生的信息：</p>
    <li v-for="item in stuarr">
        {{ item.id }} - {{ item.name }} - {{ item.age }} - {{ item.hobby}}
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.hobby }}</span>
    </li>
    <p>老师信息</p>
    <div v-for=" (item,key) in teaarr">
      {{ key }} -- {{ item }}
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const arr = ref([1,2,3,4,5,6])
const stuarr = ref([
    {
        id: 101,
        name: '萧炎',
        age: 18,
        hobby: '炼丹'
    },
    {
        id: 102,
        name: '萧熏儿',
        age: 18,
        hobby: '萧炎'
    },
    {
        id: 103,
        name: '小医仙',
        age: 18,
        hobby: '萧炎'
    }
])
const teaarr = reactive(
    {
        name: '药老',
        age: 118,
        hobby: '炼丹'
    }
)
</script>

<style lang="scss" scoped>

</style>